<template>
  <div class="activelist">
    <h2 id="huodongYeh2">线上活动</h2>
    <div id="xianshang">
      <router-link
        tag="li"
        :to="{name:'activity',params:{id:activity.gameTitleId}}"
        v-for="activity in query"
        :key="activity.gameTitleId"
      >
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span class="gameTitleId">{{activity.gameTitleId}}</span>
              <div class="dongImg">
                  <img :src="'/api/upload/' + activity.gameTitleImg" alt />
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple-light">
              <div class="huodongwen">
                <h3 class="huodongh2">
                  <a>{{activity.gameTitleName}}</a>
                </h3>
                <span
                  class="datespan"
                >{{formateDate(activity.gameBeginTime)}} - {{formateDate(activity.gameEndTime)}}</span>
                <p class="huodongContent">{{activity.gameTitleContent}}</p>
                <span class="butt">{{activity.status}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <hr />
      </router-link>
      <div id="pages">
        <input type="button" value="第一页" v-on:click="firstPage" id="first" class="btn1" />
        <input type="button" value="上一页" v-on:click="prePage" id="next" class="btn1" />
        <input type="button" value="下一页" v-on:click="nextPage" class="btn1" />
        <input type="button" value="最后一页" v-on:click="lastPage" id="last" class="btn1" />
        <span>第{{currentPage+1}}页/共{{pageNum}}页</span>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
h2 {
  font-size: 30px;
  color: #e6a23c;
  font-weight: 700;
  line-height: 48px;
  margin-left: 20px;
}
.gameTitleId {
  display: none;
}
.dongImg {
  /* width: 95%; */
  height: 250px;
  overflow: hidden;
  display: inline-block;
  margin-left: 5px;
  border-radius: 5px;
}
.dongImg img {
  cursor: pointer;
  transition: all 0.5s;
  /* height: 250px;
  width: 750px;
  margin-left: -250px; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.dongImg img:hover {
  transform: scale(1.1);
}
.huodongwen {
  display: inline-block;
  font-style: normal;
  margin-top: 30px;
  margin-left: 20px;
  line-height: 2em;
  width: 95%;
}
.huodongh2 {
  cursor: pointer;
  font-size: 18px;
  color: black;
}
.datespan {
  color: #ccc;
}
.huodongwen p {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.butt {
  cursor: pointer;
  width: 150px;
  height: 50px;
  border: 1px solid #e6a23c;
  color: #e6a23c;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  border-radius: 10px;
  float: right;
  margin-top: 10px;
}
.butt:hover {
  color: white;
  background-color: #e6a23c;
}
.huodongContent{
  font-size: 16px;
}
</style>
<script>
export default {
  data() {
    return {
      queryId: -1,
      activityList: [],
      totalPage: [], // 所有页面的数据
      pageSize: 6, // 每页显示数量
      pageNum: 1, // 共几页
      dataShow: "", // 当前显示的数据
      currentPage: 0 // 当前页 默认当前显示第一页
    };
  },
  created() {
    // this.queryId = this.$route.params.id;
    this.$axios
      .get("/api/gameTitle/getGCGame", {
        params: { gameTitleId: this.queryId }
      })
      .then(res => {
        console.log("activityList:", res);
        this.activityList = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  computed: {
    query() {
      this.queryId = this.$route.params.id;
      let healthArr = [];
      if (this.queryId == 1) {
        for (var i = 0; i < this.activityList.length; i++) {
          if (this.activityList[i].type == this.queryId) {
            healthArr.push(this.activityList[i]);
          }
        }
      } else if (this.queryId == 2) {
        for (var i = 0; i < this.activityList.length; i++) {
          if (this.activityList[i].type == this.queryId) {
            healthArr.push(this.activityList[i]);
          }
        }
        this.currentPage = 0;
      } else if (this.queryId == 3) {
        for (var i = 0; i < this.activityList.length; i++) {
          if (this.activityList[i].type == this.queryId) {
            healthArr.push(this.activityList[i]);
          }
        }
      } else if (this.queryId == 4) {
        for (var i = 0; i < this.activityList.length; i++) {
          if (this.activityList[i].type == this.queryId) {
            healthArr.push(this.activityList[i]);
          }
        }
      } else {
        for (var i = 0; i < this.activityList.length; i++) {
          healthArr.push(this.activityList[i]);
        }
      }

      // console.log('healthArr::::::',healthArr)
      // console.log('this.queryId',this.queryId)
      // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
      this.pageNum = Math.ceil(healthArr.length / this.pageSize) || 1;
      for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        this.totalPage[i] = healthArr.slice(
          this.pageSize * i,
          this.pageSize * (i + 1)
        );
      }
      // 获取到数据后显示第一页内容
      this.dataShow = this.totalPage[this.currentPage];
      return this.dataShow;
    }
  },
  methods: {
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate());
      return formatdatetime;
    },
    // 第一页
    firstPage: function() {
      if (this.currentPage === 0) return;
      this.currentPage = 0;
      // console.log("第一页pageNum:",this.dataShow)
    },
    // 最后页
    lastPage: function() {
      if (this.currentPage === this.pageNum - 1) return;
      this.currentPage = this.pageNum - 1;
      // console.log("最后页pageNum:",this.dataShow)
    },
    // 上一页
    prePage: function() {
      if (this.currentPage === 0) return;
      this.currentPage--;
      // this.dataShow = this.totalPage[--this.currentPage];
      // console.log("点击上一页pageNum:",this.dataShow)
    },
    // 下一页
    nextPage: function() {
      if (this.currentPage === this.pageNum - 1) return;
      this.currentPage++;

      // this.dataShow = this.totalPage[++this.currentPage];
      // console.log("点击下一页 pageNum:",this.dataShow)
    }
  }
};
</script>
